<template>
  <!-- <div class="content bounceInRight animated"> -->
  <div class="content">
    <van-nav-bar v-if="isShowEdit" title="购物车" right-text="编辑" @click-right="onClickRight"/>
    <van-nav-bar v-if="isShowCancel" title="购物车" right-text="取消" @click-right="onClickRight"/>
    <div v-if="shopCarNum == 0" class="aaaaaa">
      购物车空空如也，快去挑选吧
    </div>
    <div class="goods-list" v-if="shopCarNum != 0">
      <ul>
        <li v-for="(list,index) in shopCar" :key="index">
          <img :src="list.imgsrc" alt="">
          <div class="goods-explain">
            <div class="goods-explain-title">{{list.name}}</div>
            <p>{{list.describe}}</p>
            <div class="num-list"><span>￥{{list.price}}</span><van-stepper v-model="list.num" class="num" /></div>
            <van-checkbox v-if="checkIsShow" v-model="list.isChecked" @click.native="isSelect(list.id,list.isChecked)" class="good-check"></van-checkbox>
            <van-button v-if="deleteIsShow" @click.native="deleteGoods(index)" type="danger" size="mini" class="good-check">删除</van-button>
          </div>
        </li>
      </ul>
    </div>
    <div class="total" v-if="shopCarNum != 0">
      <van-checkbox v-model="isSelectAll" @click.native="selectAll">全选</van-checkbox>
      <!-- <div>合计：￥{{totalPrice}}</div> -->
      <div>合计：￥{{totalPrice}}</div>
      <van-button type="danger" class="settlement" @click.native="Settlement">去结算</van-button>
    </div>
  
    <van-tabbar v-model="active" style="position:fixed;bottom:0">
      <van-tabbar-item icon="shop" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" to="/class">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" :info="shopCarNum" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      isShowEdit: true,
      isShowCancel: false,
      isSelectAll: false,
      allNum: 0,
      allSelectId: [],
      checkIsShow: true,
      deleteIsShow: false,
      shopCarNum: ''
    }
  },
  mounted () {
    // 购物车显示数
    this.shopCarNum = this.shopCar.length
  },
  computed:{
    totalPrice () {
      var totalPrice = 0;
      for(var i = 0; i < this.shopCar.length; i++){
        // 循环数组后判断isChecked 是否为true 
        if(this.shopCar[i].isChecked){
          totalPrice += this.shopCar[i].price * this.shopCar[i].num
        }
        // 如果数组中有一个isChecked为false，那么取消全选按钮的状态
        if(!this.shopCar[i].isChecked){
          this.isSelectAll = false
        }
      }
      // 将总数精确到小数点后两位
      return totalPrice.toFixed(2)
    },
    // 获取到shopCar数组
    ...mapState(['shopCar'])
  },
  methods: {
    onClickRight () {
      this.isShowEdit = !this.isShowEdit ;
      this.isShowCancel = !this.isShowCancel ;
      this.checkIsShow = !this.checkIsShow ;
      this.deleteIsShow = !this.deleteIsShow ;
    },
    // 单个选择
    isSelect (id,isSelect) {
      // 判断单选框状态，如果是true，就将id push
      if (isSelect) {
        this.allSelectId.push(id)
      }else{
        // 如果是false，将该单选框的id从数组中删除
        var index = this.allSelectId.indexOf(id);
        this.allSelectId.splice(index,1)
      }
    },
    // 全选or不全选
    selectAll () {
      // this.isCheckedAll获取当前全选按钮的状态
      if (this.isSelectAll) {
        // 1、如果是全选，先清空之前的数组，将列表所有ID push到数组中
        // 2、将所有商品的isChecked改成true
        this.allSelectId = []
        for(var i = 0; i < this.shopCar.length; i++){
          this.allSelectId.push(this.shopCar[i].id);
          this.shopCar[i].isChecked = true
        }
      }else{
        // 如果不是全选,将数组清空
        // 并且将isChecked改为false
        this.allSelectId = []
        for(var i = 0; i < this.shopCar.length; i++){
          this.shopCar[i].isChecked = false
        }
      }
    },
    // 删除所选
    deleteGoods (index) {
      // 调用vuex中的delshopCar
      this.$store.commit('delshopCar',index)
    },
    // 结算
    Settlement () {
      // query(地址栏显示)传输用 path this.$router.push({path: 'Settlement', query:{ totalPrice: 1111}});
      // params(隐藏)传输用 name this.$router.push({name: 'Settlement', params: { id: 1, class: 'a' }})
      if( this.totalPrice == 0.00 ){
        // Toast 轻提示
        this.$toast.fail('请选择商品');
        return
      }else{
        this.$router.push({name: 'Settlement', params:{ totalPrice: this.totalPrice}});
      }
      
    }
  },
  watch: {
    // 全选所有
    allSelectId:function(value){
      this.allSelectId = value
    },
    // 单选按钮
    shopCar:function(value){
      this.shopCar = value
      // 监测shopCar数组变化
      this.shopCarNum = this.shopCar.length
    },
    shopCarNum:function(value){
      this.shopCarNum = value 
    }
  }
}
</script>

<style scoped>
.content{
  position: relative;
  height: 100%;
}
.goods-list{
  width: 100%;
  margin: 0 auto;
  padding-bottom: 95px;
}
.goods-list li{
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  padding-left: 100px;
}
.goods-list li img{
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0
}
.goods-explain{
  padding: 0 10px;
  font-size: 0.5em;
}
.goods-explain p{
  margin:9px 0 0 0;
}
.goods-explain-title{
  margin-top: 20px;
}
.goods-list .num-list{
  margin-top:10px;
}
.goods-list .num-list span{
  color: red;
  font-size: 2em;
  float: left
}
.goods-list .num{
  float: right
}
.good-check{
  position: absolute;
  right: 10px;
  top: 10px;
}
.total{
  position: fixed;
  width: 100%;
  bottom: 50px;
  height: 44px;
  line-height: 44px;
  border-top: 1px solid rgb(230, 230, 230);
  background: #fff;
}
.total div{
  display: inline-block;
  font-size: 1em;
  margin-left: 10px;
  float: left
}
.all-check{
  width: 100px;
  display: inline-block;
  margin-left: 10px;
  font-size: 0.5em;
}
.settlement{
  position: absolute;
  right: 0;
}
</style>